import { Footer } from './footer/footer'
import { Header } from './header/header'
import { Outlet } from 'react-router-dom'
import { styled } from '@mui/material'
import { Alert } from './alert'
import { withProtection } from '../../hoc/withProtection'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	width: '100%',
	alignItems: 'flex-start',
	justifyContent: 'center',
	minHeight: 'calc(100vh - 274px)',
}))

const Root = withProtection(() => (
	<>
		<Header />
		<Alert />
		<StyledContainer>
			<Outlet />
		</StyledContainer>
		<Footer />
	</>
))

export default Root
